                                                                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="all">全选</button><br>
    <button id="noAll">不选</button><br>
    <button id="reverse">反选</button><br>
    <input type="checkbox">篮球<br>
    <input type="checkbox">足球<br>
    <input type="checkbox">高尔夫<br>
    <input type="checkbox">橄榄球<br>
    <input type="checkbox">乒乓球<br>

    <script>
        var all = document.getElementById("all");
        var noAll = document.getElementById("noAll");
        var reverse = document.getElementById("reverse");
        var checks = document.getElementsByTagName("input");
        all.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = true;
            }
        }
        noAll.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = false;
            }
        }
        reverse.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = (checks[i].checked == true) ? false : true;
            }
        }
    </script>
</body>
</html>